<!DOCTYPE html>
<html lang="zh">
<head>
    <th:block th:include="include :: header('手动执行')" />
    <th:block th:include="include :: datetimepicker-css" />
    <th:block th:include="include :: select2-css" />
    <th:block th:include="include :: bootstrap-editable-css" />
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-md-5" style="background-color: #fff;min-height:550px;"> <!--style="font-size:16px;margin-top:6px;"-->
             <div class="tabs-container">
                    <ul class="nav nav-tabs">
                        <li class="active"><a data-toggle="tab" href="#tab-8">数据</a>
                        </li>
                        <li class=""><a data-toggle="tab" href="#tab-9">样式</a>
                        </li>
                    </ul>
                    <div class="tab-content ">
                        <div id="tab-8" class="tab-pane active">
                            <div class="panel-body">
                                <form class="form-horizontal" style="margin-top: 20px">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">选系统：</label>
                                        <div class="col-sm-9">
                                            <select name="sdSys" id="sdSys" class="form-control" th:with="type=${@baseSd.getItem('hos_sys')}" onchange="sysChange(this)">
                                                <option value=>全部</option>
                                                <option th:each="item : ${type}" th:text="${item.na}" th:value="${item.cd}"></option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">选指标：</label>
                                        <div class="col-sm-9">
                                            <select class="form-control select2-multiple" data-none-selected-text="指标选择" multiple id="indexSelect"></select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">时间维：</label>
                                        <div class="col-sm-9">
                                            <label class="check-box">
                                                <input type="radio" value="D" name="dateType">日</label>
                                            <label class="check-box">
                                                <input type="radio" value="M" name="dateType">月</label>
                                            <label class="check-box">
                                                <input type="radio" value="Q" name="dateType">季</label>
                                            <label class="check-box">
                                                <input type="radio" value="Y" name="dateType">年</label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">同环比：</label>
                                        <div class="col-sm-9">
                                            <label class="check-box">
                                                <input id="tb" type="checkbox" value="tb" text="">同比
                                            </label>
                                            <label class="check-box">
                                                <input id="hb" type="checkbox" value="hb" text="">环比
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">排序：</label>
                                        <div class="col-sm-9">
                                            <label class="check-box">
                                                <input name="order" type="radio" value="desc" text="" checked>降序
                                            </label>
                                            <label class="check-box">
                                                <input name="order" type="radio" value="asc" text="">升序
                                            </label>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">其他维：</label>
                                        <div class="col-sm-9">
                                            <button type="button" class="btn btn-block btn-outline btn-success" onclick="loadMainTable()">查询</button>
                                        </div>
                                    </div>
                                </form>
                                <table id="bootstrap-table"></table>
                            </div>
                        </div>
                        <div id="tab-9" class="tab-pane">
                            <div class="panel-body">
                                <form class="form-horizontal" style="margin-top: 20px">
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">标题：</label>
                                        <div class="col-sm-9">
                                            <input name="title" id="title" class="form-control" type="text" />
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">标题位置：</label>
                                        <div class="col-sm-9">
                                            <select name="titlePosition" id="titlePosition" class="form-control" >
                                                <option value="leftTop">左上角</option>
                                                <option value="center">居中</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">图形：</label>
                                        <div class="col-sm-9">
                                            <select name="chartType" id="chartType" onchange="chartChange()" class="form-control" >
                                                <option value="table">表格</option>
                                                <option value="pie">饼图</option>
                                                <option value="bar">柱图</option>
                                                <option value="line">折线图</option>
                                                <option value="barAndLine">柱+折线图</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-sm-3 control-label">图例：</label>
                                        <div class="col-sm-9">
                                            <select name="legendPosition" id="legendPosition" class="form-control" >
                                                <option value="">无需显示</option>
                                                <option value="up">上</option>
                                                <option value="down">下</option>
                                                <option value="left">左</option>
                                                <option value="right">右</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="x1" style="display: none">
                                        <label class="col-sm-3 control-label">X轴：</label>
                                        <div class="col-sm-6">
                                            <select  id="xFieldName" class="form-control" >
                                            </select>
                                        </div>
                                        <div class="col-sm-3">
                                            <input id="xNum" class="form-control" type="text" placeholder="数量"/>
                                        </div>
                                    </div>
                                    <div class="form-group" id="y1" style="display: none">
                                        <label class="col-sm-3 control-label">Y1轴：</label>
                                        <div class="col-sm-5">
                                            <select id="y1FieldName" class="form-control" >
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <select id="y1Position" class="form-control" >
                                                <option value=>靠左</option>
                                                <option value=>靠右</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <select name="chartType" id="y1ChartType" class="form-control" >
                                                <option value=></option>
                                                <option value=>柱图</option>
                                                <option value=>折线图</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="y2" style="display: none">
                                        <label class="col-sm-3 control-label">Y2轴：</label>
                                        <div class="col-sm-5">
                                            <select id="y2FieldName" class="form-control" >
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <select id="y2Position" class="form-control" >
                                                <option value=>靠左</option>
                                                <option value=>靠右</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <select name="chartType" id="y2ChartType" class="form-control" >
                                                <option value=></option>
                                                <option value=>柱图</option>
                                                <option value=>折线图</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="y3" style="display: none">
                                        <label class="col-sm-3 control-label">Y3轴：</label>
                                        <div class="col-sm-5">
                                            <select id="y3FieldName" class="form-control" >
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <select id="y3Position" class="form-control" >
                                                <option value=>靠左</option>
                                                <option value=>靠右</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <select name="chartType" id="y3ChartType" class="form-control" >
                                                <option value=></option>
                                                <option value=>柱图</option>
                                                <option value=>折线图</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="rowToColFldGroup">
                                        <label class="col-sm-3 control-label">行转列字段：</label>
                                        <div class="col-sm-9">
                                            <select class="form-control" data-none-selected-text="行转列字段" name="rowToColFld" id="rowToColFld">

                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="showFldsGroup">
                                        <label class="col-sm-3 control-label">显示列：</label>
                                        <div class="col-sm-9">
                                            <select class="form-control select2-multiple" multiple data-none-selected-text="指标选择" name="showFlds" id="showFlds">
                                            </select>
                                        </div>
                                    </div>
                                    <div class="form-group" id="showFldsScaleGroup">
                                        <label class="col-sm-3 control-label">显示列比例：</label>
                                        <div class="col-sm-9">
                                            <input name="showFldsScale" class="form-control" type="text" id="showFldsScale"/>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
             </div>
        </div>
        <div class="col-md-7" >
            <div class="row" style="margin-left:2px">
                <div class="col-sm-12 search-collapse">
                    <form id="formId">
                        <div class="select-list">
                            <ul>
                                <li>
                                    <label>开始：</label>
                                    <input type="text" id="dateBegin" placeholder="yyyy-MM-dd" autocomplete="off"/>
                                </li>
                                <li>
                                    <label>结束：</label>
                                    <input type="text" id="dateEnd" placeholder="yyyy-MM-dd" autocomplete="off"/>
                                </li>
                                <li>
                                    <a class="btn btn-primary btn-rounded btn-sm" onclick="searchData()"><i class="fa fa-search"></i>提数</a>
                                    <a class="btn btn-info btn-rounded btn-sm" onclick="preview()"><i class="fa fa-tag"></i>预览</a>
                                    <a class="btn btn-success btn-rounded btn-sm" onclick="export2()"><i class="fa fa-download"></i>&nbsp;导出</a>
                                </li>
                            </ul>
                        </div>
                    </form>
                </div>
            <div class="col-sm-12 select-table table-striped wrap1" style="min-height:470px;text-align: center" id="tableDiv">
                <table id="tableExecList" class="table table-bordered">
                    <thead></thead>
                    <tbody></tbody>
                </table>
                <div id="chartDiv" style="width: 700px;height:470px;display: none;"></div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<th:block th:include="include :: select2-js" />
<th:block th:include="include :: bootstrap-table-editable-js" />
<th:block th:include="include :: echarts-js" />
<script th:src="@{/js/absolute_watermark.js}"></script>

<script type="text/javascript">
    var prefix = ctx + "etl/query";
    var generateSelect = function (thead) {
        var options = "<option></option>";
        $.each(thead,function(index,item) {
            options += "<option value='"+index+"'>"+item+"</option>"
        });
        $("#xFieldName").html(options);
        $("#y1FieldName").html(options);
        $("#y2FieldName").html(options);
        $("#y3FieldName").html(options);
        $("#showFlds").html(options);
        $("#rowToColFld").html(options);
    },getChartStyleParam = function () {
        var queryDataParam = searchDataParam();
        if(queryDataParam==null) {
            $.modal.alertError("请先选择指标");
            return;
        }
        var chartType = $("#chartType").val();
        var styleParam={"title":$("#title").val(),"titlePosition":$("#titlePosition").val(),"legendPosition":$("#legendPosition").val(),"chartType":chartType};
        if(chartType=="table") {
            styleParam.showFlds = $("#showFlds").val();
            styleParam.showFldsScale = $("#showFldsScale").val();
            styleParam.rowToColFld = $("#rowToColFld").val();
        } else {
            var xFieldName = $("#xFieldName").val();
            var y1FieldName = $("#y1FieldName").val(),y2FieldName = $("#y2FieldName").val(),y3FieldName = $("#y3FieldName").val();
            if(xFieldName==null) {
                $.modal.alertError("X轴字段必选");
                return ;
            }
            if(y1FieldName==null) {
                $.modal.alertError("Y1轴字段必选");
                return ;
            }
            styleParam.chartXVO = {"fieldName":xFieldName,"num":$("#xNum").val()};
            var y1 = {"fieldName":y1FieldName,"chartType":$("#y1ShapeType").val()};
            var yStype = [];
            yStype.push(y1);
            if(y2FieldName!=null) {
                var y2 = {"fieldName":y2FieldName,"chartType":$("#y2ShapeType").val()};
                yStype.push(y2);
            }
            if(y3FieldName!=null) {
                var y3 = {"fieldName":y3FieldName,"chartType":$("#y3ShapeType").val()};
                yStype.push(y3);
            }
            styleParam.chartYVOList = yStype;
        }
        var param = {"chartStyleVO":styleParam,"queryParamVO":queryDataParam};
        return param;
    },showTableData = function (data) {
        var tbody = data.tbody;
        var thead = data.thead;
        var html="<tr>";
        var theads =[],theadsKey=[];
        //generateSelect(thead);
        $.each(thead,function(index,item) {
            html+="<th>"+item+"</th>";
            theads.push(item);
            theadsKey.push(index);
        });
        $("#tableExecList thead").html(html+"</tr>");
        html="";

        for(var i=0;i<tbody.length;i++) {
            html+="<tr>";
            var trData = tbody[i];
            for(var j=0;j<theadsKey.length;j++) {
                html+="<td>"+(trData[theadsKey[j]]==undefined?0:trData[theadsKey[j]])+"</td>";
            }
            html+="</tr>";
        }
        $("#tableExecList tbody").html(html);
    };
    function chartChange() {
        var chartType = $("#chartType").val();
        if(chartType=="table") {
            $("#x1").hide();
            $("#y1").hide();
            $("#y2").hide();
            $("#y3").hide();
            $("#showFldsGroup").show();
            $("#showFldsScaleGroup").show();
            $("#rowToColFldGroup").show();
        } else if(chartType=="pie"){
            $("#x1").show();
            $("#y1").show();
            $("#y2").hide();
            $("#y3").hide();
            $("#showFldsGroup").hide();
            $("#showFldsScaleGroup").hide();
            $("#rowToColFldGroup").hide();
        } else {
            $("#x1").show();
            $("#y1").show();
            $("#y2").show();
            $("#y3").show();
            $("#showFldsGroup").hide();
            $("#showFldsScaleGroup").hide();
            $("#rowToColFldGroup").hide();
        }
    }
    function sysChange() {
        var sdSys = $("#sdSys").val();
        $.ajax({
            url: "/etl/dm/list2",
            cache: false,
            type: 'POST',
            dataType: 'json',
            data: JSON.stringify({"sdSys":sdSys,"fgAct":1}),
            contentType: 'application/json;charset=UTF-8',
            success: function (result) {
                var data = result.data;
                $("#indexSelect").html("");
                if(data.length>0) {
                    $.each(data,function (index,item) {
                        $("#indexSelect").append('<option value="'+item.idIndex+'">'+item.naIndex+'</option>');
                    });
                }
            }
        });
    }

    function preview() {
        var param = getChartStyleParam();
        debugger;
        $.ajax({
            url: '/qry/chart/baseQry',
            beforeSend: function(request) {
                request.setRequestHeader("token",sessionStorage.getItem("token"));
            },
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(param),
            success: function (result) {
                if(result.code==0) {
                    var chartType = $("#chartType").val();
                    var data = result.data;
                    if(chartType=="table") {
                        showTableData(data.data);
                        $("#tableExecList").show();
                        $("#chartDiv").hide();
                    } else {
                        var echartsInstance=echarts.init(document.getElementById("chartDiv"));
                        echartsInstance.setOption(eval('(' + data.data + ')'));
                        $("#tableExecList").hide();
                        $("#chartDiv").show()
                    }
                }
            }
        });
    }
    var searchDataParam = function () {
        var startDate = $("#dateBegin").val();
        var endDate = $("#dateEnd").val();
        var idIndexs = $("#indexSelect").val();
        if(idIndexs.length==0) {
            $.modal.alertError("请先选择指标");
            return;
        }
        var dims = [];
        var rows = $("#"+table.options.id).bootstrapTable('getSelections');
        $.each(rows,function (index,item) {
            dims.push({"idPubfld":item.idPubfld,"filter":item.filter});
        });
        var order = $('input:radio[name=order]:checked').val();
        var sort="";
        if(idIndexs.length==1) {
            sort=idIndexs+' '+order;
        }
        var indexVOList=[];
        $.each(idIndexs,function (index,item) {
            indexVOList.push({"idIndex":item});
        });
        var fgTb = $('#tb:checked').val();
        fgTb = (fgTb==undefined?false:true);
        var fgHb = $('#hb:checked').val();
        fgHb = (fgHb==undefined?false:true);
        var param = {"startDate":startDate,"endDate":endDate,"orderBy":sort,"dimVOList":dims,"indexVOS":indexVOList,"dateType":$('input:radio[name=dateType]:checked').val(),"fgTb":fgTb,"fgHb":fgHb};
        return param;
    }
    function export2() {
        var param = this.searchDataParam();
        param.fileName = "自助查询数据导出";
        $.ajax({
            url: '/etl/query/commonDmQuery/export',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(param),
            success: function (result) {
                if (result.code == 0) {
                    window.location.href = ctx + "common/download?fileName=" + encodeURI(result.data) + "&delete=" + true;
                } else {
                    $.modal.alertError(result.msg);
                }
            }
        });
    }

    function searchData() {
        var param = this.searchDataParam();
        var endDate = $("#dateEnd").val();
        $.ajax({
            url: '/etl/query/commonDmQuery',
            type: 'post',
            dataType: 'json',
            contentType: 'application/json;charset=UTF-8',
            data:JSON.stringify(param),
            success: function (msg) {
                if(msg.code==0) {
                    var tbody = msg.data.tbody;
                    var thead = msg.data.thead;
                    var html="<tr>";
                    var theads =[],theadsKey=[];
                    generateSelect(thead);
                    $.each(thead,function(index,item) {
                        html+="<th>"+item+"</th>";
                        theads.push(item);
                        theadsKey.push(index);
                    });
                    $("#tableExecList thead").html(html+"</tr>");
                    html="";
                    for(var i=0;i<tbody.length;i++) {
                        html+="<tr>";
                        var trData = tbody[i];
                        for(var j=0;j<theadsKey.length;j++) {
                            html+="<td>"+(trData[theadsKey[j]]==undefined?0:trData[theadsKey[j]])+"</td>";
                        }
                        html+="</tr>";
                    }
                    $("#tableExecList tbody").html(html);
                    isCheckWithJudge($("#indexSelect").val(),endDate);
                } else {
                    $.modal.alertError(msg.msg);
                }

            }
        });
    }
    
    function lookDimData(tableName) {
        $.modal.open("表["+tableName+"]数据",prefix+"/dimData/"+tableName,900,600);
    }

    function loadMainTable() {
        $("#bootstrap-table").bootstrapTable('destroy');
        var options = {
            url:  "/etl/dm/findCommonDims?idIndexs="+$("#indexSelect").val(),
            method:"get",
            modalName: "执行数据",
            showSearch: false,
            showRefresh: false,
            showToggle: false,
            showColumns: false,
            onEditableSave: onEditableSave,
            columns: [{
                checkbox: true
            },
                {
                    field: 'idPubfld',
                    title: '主键',
                    visible: false
                },
                {
                    field: 'cdTbDim',
                    title: '表名',
                    visible: false
                },
                {
                    field: 'naPubfld',
                    title: '维度名称'
                },
                {
                    field: 'filter',
                    title: '过滤条件',
                    editable: true
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function(value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-info btn-xs " href="javascript:void(0)" onclick="lookDimData(\'' + row.cdTbDim + '\')"><i class="fa fa-list-ul"></i>查看</a> ');
                        return actions.join('');
                    }
                }]
        };
        $.table.init(options);
    }
    function onEditableSave (field, row, rowIndex, oldValue, $el) {
        $("#" + table.options.id).bootstrapTable('uncheckAll');
    }

    function submitHandler(index, layero) {
        $.modal.close(index);
        return JSON.stringify(getChartStyleParam());
    }

    function doSubmit(index, layero){
        $.modal.close(index);
    }

    $(function(){
        sysChange();
        loadMainTable();
        $("#dateBegin").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        $("#dateEnd").datetimepicker({
            format: "yyyy-mm-dd",
            minView: "month",
            autoclose: true
        });
        $("select").on("select2:select", function (evt) {
            var element = evt.params.data.element;
            var $element = $(element);

            $element.detach();
            $(this).append($element);
            $(this).trigger("change");
        });
        $("select").on("select2:unselect", function (evt) {
            var element = evt.params.data.element;
            var $element = $(element);
            $element.remove();
        });
    });
</script>
</body>
</html>